<!-- https://konvajs.org/docs/sandbox/Video_On_Canvas.html -->
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@8.2.1/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva lable Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <div id="container"></div>
    <script>
      var width = window.innerWidth
      var height = window.innerHeight

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      })

      var layer = new Konva.Layer()
      stage.add(layer)
      var text = new Konva.Text({
        text: 'Loading video...',
        width: stage.width(),
        height: stage.height(),
        align: 'center',
        verticalAlign: 'middle',
      })
      layer.add(text)
      // create label
      var label = new Konva.Label({
        id: 'dgiot_labelid',
        name: 'lablename',
        name: '1111',
        x: 100,
        y: 100,
        draggable: true,
      })

      // add a tag to the label
      label.add(
        new Konva.Tag({
          id: 'dgiot_Tagid',
          name: 'tag',
          fill: '#bbb',
          stroke: '#333',
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffset: [10, 10],
          shadowOpacity: 0.2,
          lineJoin: 'round',
          pointerDirection: 'up',
          pointerWidth: 20,
          pointerHeight: 20,
          cornerRadius: 5,
        })
      )

      // add text to the label
      label.add(
        new Konva.Text({
          id: 'dgiot_text',
          text: 'dgiot',
          fontSize: 50,
          lineHeight: 1.2,
          padding: 10,
          fill: 'green',
        })
      )
      layer.add(label)

      console.log(stage.toJSON())

      //  labjson {"attrs":{"id":"dgiot_labelid","name":"1111","x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"id":"dgiot_Tagid","name":"tag","width":128.4228515625,"height":80},"className":"Tag"},{"attrs":{"id":"dgiot_text","text":"dgiot","fontSize":50,"lineHeight":1.2,"padding":10,"fill":"green"},"className":"Text"}]}
    </script>
  </body>
</html>
